import React, { useEffect } from 'react';
import './user.css';
import  UserSearch from './UserSearch';
import { UserCreator, DelUser, getAdmin } from '../Redux/ActionCreator';
import { connect } from 'react-redux';
import GotoPage from './GotoPage';
const User = (props) => {
    useEffect(() => {
        props.dispatch(UserCreator())
    }, [])
    console.log(props.userreducer)
    return (
        <div className="body_right">
            <div className='right_top'>
                <p>用户管理 查看用户</p>
            </div>
            <div className='right_middle'>
            <div className='border'></div>
                    {/* 查找用户 */}
                    <div className='search_id'>
                        <p>输入查找的内容</p>
                        <UserSearch />
                        <div className='usertable'>
                            <table border='0' cellpadding='6' cellspacing='0' className='mytable'>
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>ID</th>
                                        <th>昵称</th>
                                        <th>邮箱</th>
                                        <th>手机号</th>
                                        <th>头像</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>

                                <tbody id='mainbody'>
                                    {
                                        props.userreducer.map((item, index) => {
                                            return (
                                                <tr id='del'>
                                                    <td>{index + 1}</td>
                                                    <td>{item.user_id}</td>
                                                    <td>{item.user_name}</td>
                                                    <td>{item.user_email}</td>
                                                    <td>{item.user_phone}</td>
                                                    <td id='user_pic'><img key={index} src={`http://www.h5weixin.club:1025/api/image/${item.user_pic}`} /></td>
                                                    <td>
                                                        <button className='delete'
                                                            onClick={() => {
                                                                const adminpwd = prompt('请输入管理员登录密码：')
                                                                if (adminpwd) {
                                                                    props.dispatch(DelUser(item.user_id, getAdmin(props).admin_id, adminpwd))
                                                                }
                                                                return false;
                                                            }}
                                                        >删除</button></td>
                                                </tr>
                                            )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                        {/* 分页 */}
                        <GotoPage />
                    </div>
            </div>
        </div>
    );
}
const mapStateToProps = (state) => ({
    userreducer: state.userreducer
})
export default connect(mapStateToProps)(User);